<style lang="less">

  .headline{
    display: none;
  }
  news-detail-content .recommenders{
    padding: 10px;
    background: #eee;
  }
</style>
<template>
  <div class="news-detail-content">
    <div v-if="image" class="top-slide" :style="{backgroundImage:image?'url('+imgUrl+'/public-pic?img='+image+')':'none'}">
      <h3>{{title}}</h3>
      <h6 class="img-source">{{imageSource}}</h6>
    </div>
    <div class="recommenders" v-if="recommenders">
      <router-link :to="'/recommenders/'+this.$route.params.id" tag="h5">推荐者<span class="editor" v-for="recommender in recommenders"><img :src="imgUrl+'/public-pic?img='+recommender.avatar" class="img-circle" width="20" height="20"  /></span></router-link>
    </div>
    <div class="news-content" v-html="body">
    </div>
    <link rel="stylesheet" type="text/css" :href="css">
  </div>
</template>
<script type="text/javascript">
import {mapState} from 'vuex'
  export default {
    name:'news-detail',
    data() {
      return {

      }
    },
    computed:mapState({
      imgUrl: state => state.imgUrl,
      body: state => state.newsDetail.body,
      image: state => state.newsDetail.image,
      title: state => state.newsDetail.title,
      imageSource: state => state.newsDetail.imageSource,
      css: state => state.newsDetail.css,
      recommenders: state => state.newsDetail.recommenders
    }),
    methods:{
      prevPage() {
        this.$router.go(-1)
        this.$store.commit('CHANGE_TRANSITION')
      },
    },
    created() {
      let id = this.$route.params.id;
      this.$store.dispatch('getData',{
        url:'/api/4/news/'+ id,
        mutation: 'GET_NEWS_DETAIL'
      });

    },
    watch:{
      body() {
        this.$nextTick(function(){
          let img = document.querySelector('.news-content').getElementsByTagName('img')
          for(let i=0;i<img.length;i++){
            let primaryImg = img[i].src
            img[i].src = this.imgUrl+'/public-pic?img='+primaryImg
          }
        })
      }
    },
    mounted() {


    }
  }
</script>
